<template>
  <el-dialog title="接口信息" v-model="dialogVisible" width="515">
    <el-form :model="formData" :rules="rules" ref="formRef">
      <el-form-item label="接口版本" prop="version">
        <el-select v-model="formData.version">
          <el-option label="SNMPv1" :value="1" />
          <el-option label="SNMPv2c" :value="2" />
          <el-option label="SNMPv3" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="团体字" prop="community" v-if="formData.version === 1 || formData.version === 2">
        <el-input v-model="formData.community" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="是否使用批量的SNMP请求" prop="bulk">
        <el-switch v-model="formData.bulk" :active-value="1" :inactive-value="0" inline-prompt active-text="是"
          inactive-text="否" />
      </el-form-item>
      <!--接口版本 3-->
      <template v-if="formData.version === 3">
        <el-form-item label="上下文名称" prop="contextName">
          <el-input v-model="formData.contextName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="安全名称" prop="securityName">
          <el-input v-model="formData.securityName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="安全级别" prop="securityLevel">
          <el-select v-model="formData.securityLevel">
            <el-option label="noAuthNoPriv" :value="0" />
            <el-option label="authNoPriv" :value="1" />
            <el-option label="authPriv" :value="2" />
          </el-select>
        </el-form-item>
      </template>
      <!--安全级别 authNoPriv\authPriv-->
      <template v-if="formData.securityLevel == 1 || formData.securityLevel == 2">
        <el-form-item label="认证协议" prop="authProtocol">
          <el-select v-model="formData.authProtocol">
            <el-option label="MD5" :value="0" />
            <el-option label="SHA1" :value="1" />
            <el-option label="SHA224" :value="2" />
            <el-option label="SHA256" :value="3" />
            <el-option label="SHA384" :value="4" />
            <el-option label="SHA512" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="验证密码" prop="authPassphrase">
          <el-input v-model="formData.authPassphrase" placeholder="请输入"></el-input>
        </el-form-item>
      </template>
      <!--安全级别 authPriv-->
      <template v-if="formData.securityLevel == 2">
        <el-form-item label="隐私协议" prop="privProtocol">
          <el-select v-model="formData.privProtocol">
            <el-option label="DES" :value="0" />
            <el-option label="AES128" :value="1" />
            <el-option label="AES192" :value="2" />
            <el-option label="AES256" :value="3" />
            <el-option label="AES192C" :value="4" />
            <el-option label="AES256C" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="隐私密码" prop="privPassphrase">
          <el-input v-model="formData.privPassphrase" placeholder="请输入"></el-input>
        </el-form-item>
      </template>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdd(formRef)">确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, defineEmits } from "vue";
const emit = defineEmits(['change'])
const dialogVisible = ref(false);
const formRef = ref();
const formData = ref({
  version: 1,
  bulk: 1,
  community: '',
  contextName: '',
  securityName: '',
  securityLevel: 0,
  authProtocol: 0,
  authPassphrase: '',
  privProtocol: 0,
  privPassphrase: ''
});
const rules = {
  version: [{ required: true, message: "请选择接口版本", trigger: "blur" }],
  community: [{ required: true, message: "请输入团体字", trigger: "blur" }],
  bulk: [{ required: true, message: "请选择是否使用批量的SNMP请求", trigger: "blur" }],
  contextName: [{ required: true, message: "请输入上下文名称", trigger: "blur" }],
  securityName: [{ required: true, message: "请输入安全名称", trigger: "blur" }],
  securityLevel: [{ required: true, message: "请选择安全级别", trigger: "blur" }],
  authProtocol: [{ required: true, message: "请选择认证协议", trigger: "blur" }],
  authPassphrase: [{ required: true, message: "请输入验证密码", trigger: "blur" }],
  privProtocol: [{ required: true, message: "请选择隐私协议", trigger: "blur" }],
  privPassphrase: [{ required: true, message: "请输入隐私密码", trigger: "blur" }]
};
const handleAdd = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      dialogVisible.value = false;

      if (formData.value.securityLevel == 1 || formData.value.securityLevel == 2) {
        let data = {
          version: formData.value.version,
          community: formData.value.community,
          bulk: formData.value.bulk
        }
        emit('change', data)
      } else {
        emit('change', formData.value)
      }

    }
  });
};

const handleOpen = (data) => {
  if (data) {
    formData.value = data;
  }
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
};
defineExpose({
  handleOpen,
  handleClose,
});
</script>
